<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ajaxFileUpload demo</title>

  <!-- Bootstrap -->
  <link href="{:config('__public__')}/static/bootstrap-3.3.4/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <div class="main-title">
    <h2>ajaxFileUpload demo</h2>
  </div>
  <div class="container">
    <form action="{:url('test')}" enctype="application/x-www-form-urlencoded" method="POST"
            class="form-horizontal">

      <div class="form-group">
        <label class="col-sm-12">上传图片</label>
        <input type="file" id="file1" name="file1" />
        <input type="button" value="上传" />
        <p>
          <img id="img1" alt="上传成功啦" src="" />
        </p>
      </div>


    </form>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<script src="{:config('__public__')}/static/jquery-ajaxFileUpload/ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $(":button").click(function () {
            ajaxFileUpload();
        })
    })
    function ajaxFileUpload() {
        $.ajaxFileUpload
        (
            {
                url: '/index.php/admin/Upload/index', //用于文件上传的服务器端请求地址
                secureuri: false, //是否需要安全协议，一般设置为false
                fileElementId: 'file1', //文件上传域的ID
                dataType: 'json', //返回值类型 一般设置为json
                success: function (data, status)  //服务器成功响应处理函数
                {
                    $("#img1").attr("src", data.imgurl);
                    if (typeof (data.error) != 'undefined') {
                        if (data.error != '') {
                            alert(data.error);
                        } else {
                            alert(data.msg);
                        }
                    }
                },
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    alert(e);
                }
            }
        )
        return false;
    }
</script>

</body>
</html>